<template>
  <el-menu default-active="2" class="aside-menu" :router="true">
    <template v-for="(menuItem, menuIndex) in menuList">
      <el-submenu
        v-if="menuItem.children"
        :index="menuItem.path"
        :key="menuIndex"
      >
        <template slot="title">
          <i :class="menuItem.icon"></i>
          <span>{{ menuItem.title }}</span>
        </template>
        <el-menu-item
          v-for="(subitem, subIndex) in menuItem.children"
          :index="subitem.path"
          :key="subIndex"
          >{{ subitem.title }}</el-menu-item
        >
      </el-submenu>
      <el-menu-item v-else :index="menuItem.path" :key="menuIndex">
        <i :class="menuItem.icon"></i>
        <template slot="title">
          <span>{{ menuItem.title }}</span>
        </template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data: () => ({
    menuList: [
      {
        path: "home",
        title: "数据统计",
        icon: "el-icon-data-line",
      },
      {
        path: "",
        title: "学生班级系部管理",
        icon: "el-icon-suitcase",
        children: [
          {
            path: "department_edit",
            title: "系部管理",
          },
          {
            path: "classes_edit",
            title: "班级管理",
          },
          {
            path: "student_edit",
            title: "学生管理",
          },
        ],
      }
    ],
  }),
});
</script>

<style lang="scss" scoped>
.aside-menu {
  height: 100%;
}
</style>